import React, { PureComponent, Fragment } from 'react'
import { View, Text, StyleSheet, TextInput, Image, DeviceEventEmitter } from 'react-native'
import PropTypes from 'prop-types'
import { IS_ANDROID, ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { IS_IOS, ONE_PIXEL, STATUSBAR_HEIGHT } from '../../../../utils/ScreenUtil'
import CustomButton from '../../../../components/button/CustomButton'
import TriangleView from '../../../../components/triangle-view/index'
import NavigationUtil from '../../../../utils/NavigationUtil'
import CustomImage from 'src/components/image/CustomImage'

export default class SearchHeader extends PureComponent {
  static propTypes = {
    landmark: PropTypes.object,
    cityCallback: PropTypes.func,
    onSubmitEditing: PropTypes.func,
    clearInput: PropTypes.func,
    text: PropTypes.string,
    isPageB: PropTypes.bool
  }

  constructor (props) {
    super(props)
    this.state = {
      text: props.text
    }
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.text !== this.state.text) {
      this.setState({
        text: nextProps.text
      })
    }
  }

  render () {
    const { landmark: { cityName } = {}, isPageB } = this.props
    return (
      <Fragment>
        <View style={styles.searchHeaderView}>
          <View style={styles.searchLeftView}>
            {/* <CustomButton style={styles.searchLocationView} onPress={this._cityClick}>
            <Text style={styles.cityName}>{cityName}</Text>
            <View style={styles.triangleView}>
              <TriangleView width={ScaleS(6)} color={'#444444'} direction={'down'}/>
            </View>
          </CustomButton>
          <View style={styles.searchLine}/> */}
            <TextInput
              style={[styles.inputTextStyle]}
              placeholder={isPageB ? '请输入岗位类型、工作区域或学院名称' : '请输入职位或公司'}
              onChangeText={this._onChangeText}
              value={this.state.text}
              autoFocus={true}
              clearButtonMode={'always'}
              returnKeyType={'search'}
              enablesReturnKeyAutomatically={true}
              onSubmitEditing={this._onSubmitEditing}
            />
          </View>
          <CustomButton style={styles.cancelView} onPress={this._cancelClick}>
            {/* <Text style={styles.cancelText}>取消</Text> */}
            <CustomImage
              style={styles.imgSear}
              source={require('src/imgC/home/ser.png')}
            />
            {/* {this.state.text.length !== 0 ? (<CustomImage
              style={styles.imgSear}
              source={require('src/imgC/home/retract.png')}
            />) : (<CustomButton onPress={this._clearText}>
              <CustomImage
                style={styles.imgSear}
                source={require('src/imgC/home/search.png')}
              />
            </CustomButton>)} */}
          </CustomButton>
        </View>
        <View style={styles.searchBottomLine} />
      </Fragment>
    )
  }

  _clearText = () => {
    alert('aa')
  }

  _onSubmitEditing = () => {
    const { text } = this.state
    const { onSubmitEditing } = this.props
    if (text && onSubmitEditing) onSubmitEditing(text)
  }

  _onChangeText = (text) => {
    const { clearInput } = this.props
    this.setState({ text })
    if (!text && clearInput) clearInput()
  }

  _cityClick = () => {
    const { landmark: { cityName } = {}, cityCallback } = this.props
    NavigationUtil.navigate('CommonListCity', {
      cityName,
      callback: cityCallback
    })
  }

  _cancelClick = () => {
    // NavigationUtil.goBack()
    // DeviceEventEmitter.emit('left', '发送了请求');
  }
}

const styles = StyleSheet.create({
  container: {},
  searchHeaderView: {
    flexDirection: 'row',
    alignItems: 'center'
    // marginTop: STATUSBAR_HEIGHT + 20
  },
  searchLeftView: {
    flex: 1,
    backgroundColor: '#00000000',
    // height: ScaleS(38),
    borderRadius: ScaleS(5),
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: ScaleS(2)
  },
  searchLocationView: {
    flexDirection: 'row',
    paddingHorizontal: ScaleS(16)
  },
  cityName: {
    color: '#232323',
    fontSize: ScaleT(16),
    fontWeight: '400'
  },
  triangleView: {
    marginTop: ScaleS(IS_IOS ? 2 : 4),
    marginLeft: ScaleS(4)
  },
  searchLine: {
    height: ScaleS(22),
    width: ONE_PIXEL,
    marginRight: ScaleS(15),
    backgroundColor: '#E2E2E2'
  },
  inputTextStyle: {
    flex: 1,
    fontSize: 16,
    paddingBottom: ScaleS(16)
  },
  searchBottomLine: {
    // marginHorizontal: ScaleS(20),
    borderRadius: ScaleS(5),
    height: ScaleS(3),
    backgroundColor: '#3C3C3C'
  },
  cancelView: {
    // paddingVertical: ScaleS(10),
    // marginHorizontal: ScaleS(20),
    paddingBottom: ScaleS(16)
  },
  imgSear: {
    width: ScaleS(21),
    height: ScaleS(21)
    // paddingBottom: ScaleS(16),
    // marginHorizontal: ScaleS(20),
  }
  // cancelText: {
  //   color: '#666666',
  //   fontSize: ScaleT(16),
  //   fontWeight: '400'
  // }
})
